<template>
	<view class="content">

		<!-- #ifdef H5 -->
		<Tou></Tou>
		<!-- #endif -->
		<scroll-view scroll-y="true" class="main" >
		<!-- 轮播 -->
		<view class="lunbo">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in lunbo" :key="index" @tap="lunbos(item.id)">
					<image :src="'https://ss.lanqb.com/'+item.picture" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 九宫格 -->
		<view class="gouge flex">
			<view class="gouge-item" v-for="(item,index) in jiugongge" :key="index">
				<gouge :item="item"></gouge>
			</view>
		
		</view>
		<!-- 下面内容 -->
		<view class="nr">
			<!-- 大触直播 -->
			<view class="dachuzhibi">
				<Biaoti :dixian="true">
					<template v-slot:left>
						<text>大触直播</text>
					</template>
				</Biaoti>
				<view class="nr-one flex" v-if="zhibo.length>2" >
				
				<view class="zhibo  bai" v-for="(item,index) in zhibo.slice(0,1)">
					<kapai :item="item" :gao="369"></kapai>
				</view>
						<view class="zhibo  bai" v-for="(item,index) in zhibo.slice(1)">
							<kapai :item="item" ></kapai>
						</view>
					
				
		
				</view>
				<view v-else class="nr-one flex">
					<view class="zhibo  bai" v-for="(item,index) in zhibo.slice(0,1)">
						<kapai :item="item" :gao="369">
							
						</kapai>
					</view>
					<view class="zhibo  bai" v-for="(item,index) in zhibo.slice(1)">
						<kapai :item="item" >
							
						</kapai>
					</view>
					<view class="zhibo  bai" v-for="(item,index) in zhibo1.slice(0,1)">
						<kapai :item="item" ></kapai>
					</view>
				</view>
			</view>
			<!-- 热门教程 -->
			<view class="remenjiaocheng">
				<Biaoti :dixian="true">
					<template v-slot:left>
						<text>热门教程</text>
					</template>
				</Biaoti>
				<!-- 卡片区域 -->
				<view class="shitu flex">
					<view class="shitu-item" v-for="(item,index) in jiaocheng.slice(0,4)" :key="index">
						<view class="images">
							<image :src="'https://ss.lanqb.com/'+item.posters.app" mode=""></image>
						</view>
						<view class="shitu-item-wenzi text" v-if="item.title.length>=24">
							{{item.title.slice(0,24)}}....
						</view>
						<view class="shitu-item-wenzi text" v-else>
							{{item.title}}
						</view>
		
					</view>
		
		
				</view>
		
			</view>
			<!-- 文图教程 -->
			<view class="wentujiaocheng">
				<Biaoti :dixian="true">
					<template v-slot:left>
						<text>文图教程</text>
					</template>
				</Biaoti>
				<!-- 展示 -->
				<view class="zhanshi" v-for="(item,index) in wentu.slice(0,3)" :key="index">
					<list1 :item="item"></list1>
				</view>
			</view>
			<!-- 推荐咨询 -->
			<view class="tuijianzixun">
				<Biaoti :dixian="true">
					<template v-slot:left>
						<text>推荐咨询</text>
					</template>
				</Biaoti>
				<!-- 展示 -->
				<view class="zhanshi" v-for="(item,index) in zixun" :key="index">
					<list2 :item="item"></list2>
				</view>
			</view>
			<!-- 关于我们  -->
			<view class="women">
				<text class="women-tou" v-for="(item,index) in women.slice(0,1)" :key="item.id" > {{item.text}} </text>
				<view class="jituan flex1">
					<view class="jituan-imgs" v-for="(item,index) in women.slice(1,6)" :key="item.id" @tap="gaxt(item.urls)">
						<image :src="item.url" mode=""></image>
					</view>
					
					
				</view>
				<view class=" women-wenzi ">
					<text v-for="(item,index) in women.slice(6,8)" :key="item.id" @tap="gaxt(item.urls)">{{item.text}}</text>
					
					<view class="gongan" @tap="gaxt(item.urls)" v-for="(item,index) in women.slice(8)" :key="item.id">
						<image :src="item.url" mode=""></image> 
						<text> {{item.text}}
						</text>
					</view>
					
				
				</view>
			</view>
		</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import Tou from "@/common/nav-tar.vue"
	import Biaoti from "@/components/biaoti.vue"
	import kapai from "@/components/shouye/kapai.vue"
	import list1 from "@/components/shouye/list1.vue"
	import list2 from "@/components/shouye/list2.vue"

	import {apis} from "@/http/api.js"
	import gouge from "@/components/jiugongge.vue"
	export default {
		data() {
			return {
				lunbo: [],
				jiugongge: [{
						id: 0,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h9-b_1806.png',
						text: '免费教程'
					},
					{
						id: 1,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h10-o_1806.png',
						text: '教程兑换'
					},
					{
						id: 2,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h12-p_1811.png',
						text: '大触来了'
					},
					{
						id: 3,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h2-b_1909.png',
						text: '学院作品'
					},
					{
						id: 4,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h11-c_1811.png',
						text: '每日一画'
					},
				],
				zhibo: [],
				zhibo1: [],
				jiaocheng: [],
				wentu: [],
				zixun: [],
				women:[
					{id:0,text:'| 蓝铅笔 |',urls:''},
					{id:1,url:'https://assets-cdn.lanqb.com/image/footer/footer-icon1_124x47.png',uls:'https://xinyong.yunaq.com/certificate?site=www.lanqb.com&at=realname'},
					{id:2,url:'https://assets-cdn.lanqb.com/image/footer/footer-icon5@2x.png',urls:'https://blog.csdn.net/qq_32195805/article/details/125997270'},
					{id:3,url:'https://assets-cdn.lanqb.com/image/footer/footer-icon2@2x.png',urls:'https://assets-cdn.lanqb.com/image/footer/lab%E5%AE%9E%E5%90%8D%E5%AE%98%E7%BD%91%E8%AE%A4%E8%AF%81.pdf'},
					{id:4,url:'https://assets-cdn.lanqb.com/image/footer/footer-icon3@2x.png',urls:'http://www.innocom.gov.cn/'},
						{id:5,url:'https://xyt.xcc.cn/img/icon/icon8.png',urls:'https://xyt.xcc.cn/getpcInfo?sn=1559097290247876608&language=CN&certType=8&url=*.lanqb.com'},
						{id:6,text:'Copyright © 2022杭州多技教育科技有限公司', urls:'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602000717'},
						{id:7,text:'浙ICP备11056181号',urls:'https://blog.csdn.net/qq_32195805/article/details/125997270'},
						{id:8,text:'浙公网安备33010602000717号',
						url:'https://assets-cdn.lanqb.com/image/footer/footer-icon4@2x.png',
						urls:'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602000717'},
					]
			}

		},
		onLoad() {
			apis.lunbo().then((res) => {
				this.lunbo = res[1].data.data
				console.log(this.lunbo);

			})
			apis.zhibo().then((res) => {
				this.zhibo = res[1].data.live
				this.zhibo1 = res[1].data.course.data

			})
			apis.jiaocheng().then((res) => {
				this.jiaocheng = res[1].data

			})
			apis.wentu().then((res) => {
				this.wentu = res[1].data

			})
			apis.zixun().then((res) => {
				this.zixun = res[1].data
				
			})

		},
		methods: {
			gaxt(val){
			
				
				window.location.href = val
			
			},
			lunbos(val){
				console.log(val);
				uni.navigateTo({
					url:"/pages/index/lunbo?id="+val
				})
			}

		},
		components: {
			Tou,
			gouge,
			Biaoti,
			kapai,
			list1,
			list2
		}
	}
</script>

<style lang="scss" scoped>
	swiper-item {
		width: 100vw;
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.gouge {
		width: 100%;
		padding: 34rpx 0 20rpx;
		height: 192rpx;
		box-sizing: border-box;


		.gouge-item {
			width: 20%;
		}
	}

	// 内容
	.nr {
		background-color: #eee;
		padding: 20rpx 0 80rpx;

		.dachuzhibi {
			background-color: #fff;
			padding-bottom: 80rpx;

			.nr-one {
				flex-wrap: wrap;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
			

				.zhibo {
					width: 334rpx;
					height: 456rpx;
					// border: 1px solid #ededed;
					margin-top: 20rpx;

					.imss {
						height: 224rpx;
					}


					box-shadow:0rpx 5rpx 24rpx 0rpx rgba(226, 225, 228, 1);
					background-color: #fff;
					
				}

				.zhibo:nth-child(1) {
					width: 650rpx;
					height: 536rpx;
					padding: 10rpx 30rpx;
					margin: 0 auto;

					




				}
			}

		}

		.remenjiaocheng {
			background-color: #fff;
			margin-top: 20rpx;
			padding-bottom: 20rpx;

			.shitu {
				padding: 22rpx 10rpx 0;
				flex-wrap: wrap;

				.shitu-item {
					width: 364rpx;


					.images {
						width: 342rpx;
						height: 258rpx;
						margin: auto;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.shitu-item-wenzi {
						font-size: 26rpx;
						margin: 10rpx 0;
					}
				}
			}
		}

		.wentujiaocheng {
			margin-top: 20rpx;
			padding-bottom: 40rpx;
			background-color: #fff;
		}

		.tuijianzixun {
			margin-top: 20rpx;
			padding-bottom: 40rpx;
			background-color: #fff;
		}
		.women{
			margin-top: 20rpx;
			// padding: 20rpx;
			text-align: center;
			    color: #a4a4a4;
				font-size: 24rpx;
			
			.women-one{
				margin-bottom: 30rpx;
				
			}
			.jituan{
				margin: 30rpx 0;
				.jituan-imgs{
					width: 102rpx;
					height: 39rpx;
				
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.women-wenzi{
				font-size: 25rpx;
				
				.gongan{
						
					image{
						width: 21rpx;
						height: 21rpx;
						margin-right: 10rpx;
						
					}
					
				}
				
			}
		}
	}
	.zhanshi{
		padding: 10rpx 20rpx;
	}

	.bai {
		padding: 10rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
</style>
